<template>
	<view class="log-item">
		<view class="log-item-inner" @click="handleClick">
			<view class="text">{{ text }}</view>
			<uni-icons
				v-if="deletable"
				class="clear"
				type="close"
				size="18"
				color="#9a9a9a"
				@click="handleDelete"
			></uni-icons>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		text: {
			type: String,
			default: ''
		},
		deletable: {
			type: Boolean,
			default: false
		}
	},
	emits: ['delete', 'click'],
	methods: {
		handleDelete() {
			this.$emit('delete', this.text);
		},
		handleClick() {
			if (this.deletable) return;
			this.$emit('click', this.text);
		}
	}
};
</script>

<style lang="scss" scoped>
.log-item {
	padding: 1vw 3vw;
	font-size: 4vw;
	border-radius: 4vw;
	background-color: #f2f2f2;
	display: inline-block;

	&-inner {
		display: flex;
		align-items: center;

		.text {
			position: relative;
			top: -1px;
		}

		.clear {
			margin-left: 1vw;
		}
	}
}
</style>
